<template>
  <div class="container">
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column
          prop="grade"
          label="客户等级"
          width="80px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="score" label="分数" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="规则编号"
          width="140px"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" label="规则名称" align="center">
        </el-table-column>
        <el-table-column
          prop="starting"
          label="规则生效时间"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startStop"
          label="取数起止时间"
          width="200px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="details">
      <el-dialog
        title="客户等级计划规则基本信息"
        :visible.sync="dialogTableVisible"
      >
        <el-form :model="form">
          <el-form-item label="规则编号：" label-width="140px">
            <el-input v-model="form.number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="规则名称：" label-width="140px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="规则生效时间段：" label-width="140px">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="取数起止时间段：" label-width="140px">
            <el-input v-model="form.startStop" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="等级最高分：" label-width="140px">
            <el-input v-model="form.highest" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="规则状态：" label-width="140px">
            <el-select v-model="form.status" placeholder="请选择活动区域">
              <el-option label="保存" value="0"></el-option>
              <el-option label="失效" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="detailsData">
          <el-table-column
            property="index"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            property="indicator"
            label="指标项"
            align="center"
          ></el-table-column>
          <el-table-column
            property="occupy"
            label="指标项分值占比%"
            width="140px"
            align="center"
          ></el-table-column>
          <el-table-column
            property="heading"
            label="业务大类"
            align="center"
          ></el-table-column>
          <el-table-column
            property="genre"
            label="业务类型"
            align="center"
          ></el-table-column>
          <el-table-column
            property="variety"
            label="品种"
            align="center"
          ></el-table-column>
          <el-table-column
            property="norm"
            label="细分指标"
            align="center"
          ></el-table-column>
          <el-table-column
            property="compute"
            label="细分指标项计算系数%"
            width="160px"
            align="center"
          ></el-table-column>
          <el-table-column
            property="score"
            label="得分分值"
            align="center"
          ></el-table-column>
        </el-table>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          index: '1',
          grade: '其他客户',
          score: '30.0',
          status: '保存',
          number: 'GZ202208320001',
          name: '测试规则',
          starting: '20180202-20220202',
          startStop: '20180202-20220202',
        },
        {
          index: '2',
          grade: '其他客户',
          score: '30.0',
          status: '保存',
          number: 'GZ202208320001',
          name: '测试规则',
          starting: '20180202-20220202',
          startStop: '20180202-20220202',
        },
        {
          index: '3',
          grade: '其他客户',
          score: '30.0',
          status: '保存',
          number: 'GZ202208320001',
          name: '测试规则',
          starting: '20180202-20220202',
          startStop: '20180202-20220202',
        },
        {
          index: '4',
          grade: '其他客户',
          score: '30.0',
          status: '保存',
          number: 'GZ202208320001',
          name: '测试规则',
          starting: '20180202-20220202',
          startStop: '20180202-20220202',
        },
        {
          index: '5',
          grade: '其他客户',
          score: '30.0',
          status: '保存',
          number: 'GZ202208320001',
          name: '测试规则',
          starting: '20180202-20220202',
          startStop: '20180202-20220202',
        },
      ],
      form: {
        number: 'GZ202208320001',
        name: '测试规则',
        time: '20180202-20220202',
        startStop: '20180202-20220202',
        highest: '30.0',
        status: '1',
      },
      detailsData: [
        {
          index: '1',
          indicator: '2',
          occupy: '10',
          heading: '债券',
          genre: '卖出',
          variety: '国债',
          norm: '1',
          compute: '100',
          score: '10.0',
        },
        {
          index: '2',
          indicator: '2',
          occupy: '10',
          heading: '债券',
          genre: '卖出',
          variety: '国债',
          norm: '1',
          compute: '100',
          score: '10.0',
        },
        {
          index: '3',
          indicator: '2',
          occupy: '10',
          heading: '债券',
          genre: '卖出',
          variety: '国债',
          norm: '1',
          compute: '100',
          score: '10.0',
        },
        {
          index: '4',
          indicator: '2',
          occupy: '10',
          heading: '债券',
          genre: '卖出',
          variety: '国债',
          norm: '1',
          compute: '100',
          score: '10.0',
        },
        {
          index: '5',
          indicator: '2',
          occupy: '10',
          heading: '债券',
          genre: '卖出',
          variety: '国债',
          norm: '1',
          compute: '100',
          score: '10.0',
        },
      ],
      dialogTableVisible: false,
      total: 0,
    };
  },
  methods: {
    deleteRow() {
      this.dialogTableVisible = true;
    },
    pageFn() {
      //
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 0 16px;
  height: calc(100vh - 160px);
  overflow: scroll;
}
::v-deep {
  .el-table {
    min-height: 440px;
  }
  .el-table th.el-table__cell {
    background-color: #1c2238;
    color: #fff;
  }
  .el-form .el-form-item {
    display: inline-block;
    width: 327px;
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
